<script setup>
import OImage from "../setting/Images.vue";
import Color from "../setting/Color.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Slider from "../setting/Slider.vue";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  uid: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:config", "change"]),
  pageConfig = inject("pageConfig", []),
  createPage = inject("createPage");

const activeName = ref(0),
  form = ref({
    $position: { left: 15, top: 15 },
    $size: { width: 345 },
    $removeable: false,
    bgColor: "#ffffff",
    statisticColor: "#FF921D",
    firstIcon: "./imagesStatic/activity/vote_first.png",
    firstIconSize: { width: 26, height: 26 },
    firstIconShow: true,
    secondIcon: "./imagesStatic/activity/vote_second.png",
    secondIconSize: { width: 26, height: 26 },
    secondIconShow: true,
    thirdIcon: "./imagesStatic/activity/vote_third.png",
    thirdIconSize: { width: 26, height: 26 },
    thirdIconShow: true,
  });

const formRef = ref();

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const onChange = (val, type) => {
  detail.value = detail.value;
};

onMounted(() => {
  nextTick(() => {
    onChange();
  });
});
</script>
<template>
  <el-form
    ref="formRef"
    :model="detail"
    :disabled="disabled"
    label-width="auto"
  >
    <AlphaColor v-model="detail.bgColor" name="背景色" @change="onChange" />
    <Color v-model="detail.statisticColor" name="票数颜色" @change="onChange" />
    <OImage
      v-model="detail.firstIcon"
      v-model:size="detail.firstIconSize"
      v-model:show="detail.firstIconShow"
      name="第一名图标"
      @change="onChange"
    />
    <OImage
      v-model="detail.secondIcon"
      v-model:size="detail.secondIconSize"
      v-model:show="detail.secondIconShow"
      name="第二名图标"
      @change="onChange"
    />
    <OImage
      v-model="detail.thirdIcon"
      v-model:size="detail.thirdIconSize"
      v-model:show="detail.thirdIconShow"
      name="第三名图标"
      @change="onChange"
    />
  </el-form>
</template>
